<template>
  <div class="mountNode" id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6";
export default {
  name: "Graph6",
  props: {
    historyData: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    this.formatData();
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    textWidth(font, text) {
      console.log(font, text);
      let ctx = document.createElement("canvas").getContext("2d");
      ctx.font = font;
      return Number(ctx.measureText(text).width.toFixed());
    },
    formatData() {
      if (this.historyData.jdts.length) {
        let nodes = this.historyData.jdts;
        let edges = [];
        let nodez = [];
        if (nodes.length >= 2) {
          for (let i = 0; i < nodes.length; i++) {
            nodez.push({
              id: i + "",
              xqd: nodes[i].xqd.toString(),
              label: nodes[i].actiontype,
              username: nodes[i].username,
            });
            if (i !== nodes.length - 1) {
              edges.push({
                id: (nodes[i].xqd + nodes[i + 1].xqd).toString(),
                source: i + "",
                target: i + 1 + "",
              });
            }
          }
        } else {
          nodez.push({
            id: nodes[0].xqd.toString(),
            label: nodes[0].actiontype,
            username: nodes[0].username,
          });
        }
        this.historyData.nodes = nodez;
        this.historyData.edges = edges;
      }
    },
    initChart() {
      G6.registerNode(
        "node",
        {
          drawShape: (cfg, group) => {
            let style = cfg.labelCfg.style;
            let { width, height, fontSize } = style;
            let fontWidth = this.textWidth(fontSize + "px", cfg.label) + 40;
            let minWidth = fontWidth < width ? width : fontWidth;
            console.log(width, minWidth);
            var rect = group.addShape("rect", {
              attrs: {
                x: -minWidth / 2,
                y: -height / 2,
                ...style,
                width: minWidth,
                height,
                fill: "#1A9AD8",
              },
            });
            group.addShape("text", {
              attrs: {
                text: "分值：" + cfg.xqd,
                fill: "#fff",
                textAlign: "center",
                x: 0,
                y: -height / 2 - 5,
              },
            });
            group.addShape("text", {
              attrs: {
                text: "用户：" + cfg.username,
                fill: "#fff",
                textAlign: "center",
                x: 0,
                y: height,
              },
            });
            return rect;
          },
        },
        "single-shape"
      );

      var graph = new G6.Graph({
        container: "mountNode",
        width: 1000,
        height: 300,
        layout: {
          type: "dagre",
          rankdir: "LR",
        },
        fitView: "cc",
        modes: {
          default: ["drag-node", "drag-canvas", "zoom-canvas"],
        },
        defaultNode: {
          shape: "node",
          labelCfg: {
            style: {
              fontSize: 14,
              width: 100,
              height: 40,
              radius: 4,
              fill: "#fff",
            },
          },
        },
        defaultEdge: {
          style: {
            endArrow: true,
            lineWidth: 2,
            stroke: "#ccc",
          },
        },
      });
      graph.data(this.historyData);
      graph.render();
    },
  },
};
</script>

<style lang="scss" scoped>
.mountNode {
  width: 1000px;
  height: 300px;
}
</style>
